/*
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-04-13 15:24:19
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-10-07 11:00:42
 * @FilePath: \cxl-h5\src\utils\messageRoll.ts
 */
export default class MessageRoll {
    //列表长度
    len = 0
    //当前展示的下标
    index = 0
    //定时器
    timer: any
    //目标盒子
    box: any
    init(ref: any, len: number, callback = (arg: number) => {}) {
        const list = ref.value.children
        this.box = list[0]
        this.len = len
        //3s进行一次轮播，下标+1
        this.timer = setInterval(() => {
            if (this.index === this.len / 2) {
                this.index = 0
            }
            this.index++
            this.box.style.transition = 'all 0.35s'
            callback(this.index)
        }, 3000)

        //监听盒子的滚动结束状态，当下标等于长度的一半，立即重置下标，设置盒子的属性
        this.box.addEventListener('transitionend', () => {
            if (this.index === this.len / 2) {
                this.index = 0
                this.box.style.transition = 'none'
                callback(this.index)
            }
        })
    }
    dispose() {
        if (this.timer) {
            console.log('clear')
            clearInterval(this.timer)
        }
    }
}
